<template>
  <div class="UserMapping">
    <!-- 头部文字描述开始 -->
    <div class="title_text"></div>
    <!-- 头部文字描述结束 -->
    <!-- <div class="dDownMain">
      <div
        class="twoBox"
        style="top: 100px"
      > -->
    <!-- 左侧卡片开始 -->
    <el-card class="box-card">
      <div slot="header" class="card_text">平台用户</div>
      <div style="margin-bottom:10px">
        <el-input
          size="small"
          style="width:80%"
          class="aoto_a"
          v-model="search_user"
        ></el-input>
        <el-button
          size="small"
          style="margin-left:15px"
          @click="search_user_btn"
          icon="el-icon-search"
        ></el-button>
      </div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="isLoading_a"
          element-loading-text="数据加载中~请稍后..."
          @row-click="isUser"
          height="550"
        >
          <el-table-column prop="hospitalid" label="医院ID" width="120">
          </el-table-column>
          <el-table-column prop="loginno" label="用户名" width="120">
          </el-table-column>
          <el-table-column prop="username" label="姓名"> </el-table-column>
        </el-table>
      </template>
      <div class="block" style="text-align:center;margin-top:20px">
        <!-- 页码 -->
        <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="pages.TotalCount"
          :page-size="pages.limit"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 左侧卡片结束 -->
    <!-- 右侧卡片开始 -->
    <el-card class="box-card">
      <div slot="header" class="card_text">{{ title }}</div>
      <div>
        <template>
          <el-table
            :data="tableData_b"
            v-loading="isLoading_c"
            element-loading-text="数据加载中~请稍后..."
            style="width: 100%"
            height="600"
          >
            <el-table-column prop="TUserCode" label="用户编码">
            </el-table-column>
            <el-table-column prop="TUserName" label="用户名称">
            </el-table-column>
            <el-table-column prop="TCode" label="系统编码"> </el-table-column>
            <el-table-column prop="TName" label="系统名称"> </el-table-column>
            <el-table-column prop="Version" label="版本号"> </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button size="small" @click="cancelUsers(scope.row)"
                  >取消绑定</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-card>
    <!-- 右侧卡片结束 -->
    <!-- 中间卡片开始 -->
    <el-card class="box-card">
      <div slot="header" class="card_text">系统用户</div>
      <div class="card_b_option">
        <template>
          <el-select
            size="small"
            filterable
            v-model="value_a"
            placeholder="请选择"
            style="margin-right:28px;width:29%"
            class="auto_b"
          >
            <el-option
              v-for="item in options_a"
              :key="item.value"
              :label="item.ApplicationName"
              :value="item.ApplicationCode"
              @click.native="getOptionVal(item)"
            >
            </el-option>
          </el-select>
        </template>
        <template>
          <el-select
            filterable
            size="small"
            v-model="value_b"
            placeholder="请选择"
            style="margin-right:28px;width:29%"
            class="auto_b"
          >
            <el-option
              v-for="(item, i) in options_b"
              :key="i"
              :label="item.Name"
              :value="item.Id"
              @click.native="getOptionVal_b(item)"
            >
            </el-option>
          </el-select>
        </template>
        <template>
          <el-select
            filterable
            size="small"
            v-model="value_c"
            placeholder="请选择"
            style="width:29%"
            class="auto_b"
          >
            <el-option
              v-for="(item, i) in options_c"
              :key="i"
              :label="item"
              :value="item"
              @click.native="getTableData_a"
            >
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="card_b_inputs">
        <el-input
          v-model="card_b_input"
          placeholder="输入内容搜索"
          size="small"
          class="card_b_input"
        ></el-input>
        <el-button
          @click="userSearch"
          style="margin-left:15px"
          size="small"
          icon="el-icon-search"
        ></el-button>
      </div>
      <template>
        <el-table
          :data="tableData_a"
          v-loading="isLoading_b"
          element-loading-text="数据加载中~请稍后..."
          style="width: 100%"
          height="500"
        >
          <el-table-column prop="UserCode" label="账号"> </el-table-column>
          <el-table-column prop="UserName" label="名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" @click="addUsers(scope.row)"
                >绑定</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block" style="text-align:center;margin-top:20px">
        <el-pagination
          layout="prev, pager, next"
          @current-change="User_page_change"
          :total="系统用户_page.TotalPage"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 中间卡片结束 -->
    <!-- </div>
    </div> -->
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "UserMapping",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      title: "关联用户",
      tableData: [],
      tableData_a: [],
      tableData_b: [],
      isShow: true,
      options_a: [],
      options_b: [],
      options_c: [],
      value_a: "",
      value_b: "",
      value_c: "",
      isLoading_a: false,
      isLoading_b: false,
      isLoading_c: false,
      TName: "",
      users: "",
      card_b_input: "",
      pages: {
        page: 1,
        limit: 26,
        TotalCount: 0,
      },
      search_user: "",
      系统用户_page: {
        page: 1,
        limit: 10,
        TotalPage: 0,
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTableData();
    this.getOptions_a();
    this.getTableData_b();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    getTableData() {
      let query = {
        page: this.pages.page,
        limit: this.pages.limit,
      };
      this.isLoading_a = true;
      this.$get("employees?page=" + query.page + "&limit=" + query.limit)
        .then((res) => {
          if (res.msg == "操作成功") {
            this.tableData = res.data.list;
            this.users = res.data.list[0].loginno;
            this.pages.TotalCount = res.data.TotalCount;
            this.isLoading_a = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.isLoading_a = false;
        });
    },
    search_user_btn() {
      let query = {
        page: this.pages.page,
        limit: this.pages.limit,
        name: this.search_user,
      };
      this.isLoading_a = true;
      this.$get(
        "employees?name=" +
          query.name +
          "&page=" +
          query.page +
          "&limit=" +
          query.limit
      )
        .then((res) => {
          if (res.msg == "操作成功") {
            this.tableData = res.data.list;
            this.users = res.data.list[0].loginno;
            this.pages.TotalCount = res.data.TotalCount;
            this.isLoading_a = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.isLoading_a = false;
        });
    },
    handleCurrentChange(val) {
      this.pages.page = val;
      this.getTableData();
    },
    getOptions_a() {
      this.$get("/ServiceManage/Offer/Application?dataType=1").then((res) => {
        if (res.code == 0) {
          this.options_a = res.data;
          console.log(res.data);
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    getOptionVal(e) {
      // console.log(9999999);
      console.log(e);
      this.value_b = "";
      this.value_c = "";
      this.options_b = [];
      this.options_c = [];
      this.options_b = e.Child;
      this.TName = e.ApplicationName;
    },
    getOptionVal_b(e) {
      console.log(e);
      // this.options_c = e.Child
      this.$post("/ServiceManage/Offer/DbTables/" + e.Id).then((res) => {
        if (res.code == 0) {
          this.options_c = res.data;
          console.log(res);
        }
      });
    },
    // 获取中间卡片数据
    getTableData_a() {
      this.tableData_a = [];
      let query = {
        id: this.value_b,
        tableName: this.value_c,
      };
      this.isLoading_b = true;
      this.$post(
        "/ServiceManage/Offer/DbData?id=" +
          query.id +
          "&tableName=" +
          query.tableName +
          "&page=" +
          this.系统用户_page.page +
          "&limit=" +
          this.系统用户_page.limit,
        query
      )
        .then((res) => {
          if (res.msg == "操作成功") {
            this.tableData_a = res.data.list;
            this.系统用户_page.TotalPage = res.data.TotalCount;
            this.isLoading_b = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.isLoading_b = false;
        });
    },
    // 获取右侧卡片数据
    getTableData_b() {
      let query = {
        loginNo: this.users,
        page: 1,
        limit: 100,
      };
      this.isLoading_c = true;
      this.$post(
        "UserRelationship/PageList?loginNo=" +
          query.loginNo +
          "&page=1&limit=50",
        query
      )
        .then((res) => {
          if (res.msg == "操作成功") {
            this.tableData_b = res.data.list;
            this.isLoading_c = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.isLoading_c = false;
        });
    },
    User_page_change(val) {
      this.系统用户_page.page = val;
      this.getTableData_a();
    },
    isUser(val) {
      console.log(val);
      this.title = val.loginno + " -- 关联用户";
      this.users = val.loginno;
      this.getTableData_b();
    },
    // 用户绑定
    addUsers(val) {
      console.log(val);
      let param = {
        PUserCode: this.users,
        TUserCode: val.UserCode,
        TUserName: val.UserName,
        TCode: this.value_a,
        TName: this.TName,
        // Version: this.value_b
      };
      this.$post("UserRelationship/Create", param).then((res) => {
        if (res.code == 0) {
          this.getTableData_b();
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      });
    },
    // 用户取消绑定
    cancelUsers(val) {
      let id = val.Id;
      this.$post("UserRelationship/Delete/" + id).then((res) => {
        if (res.code == 0) {
          this.getTableData_b();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 用户搜索
    userSearch() {
      if (this.value_a == "" || this.value_b == "") {
        this.$message.error("必须选择：系统/版本号");
        return;
      }
      let query = {
        name: this.value_c,
        code: this.value_a,
        version: this.value_b,
        keyword: this.card_b_input,
      };
      this.$post(
        "UserRelationship/ThirdUserList?name=" +
          query.name +
          "&code=" +
          query.code +
          "&version=" +
          query.version +
          "&keyword=" +
          query.keyword
      ).then((res) => {
        if (res.code == 0) {
          this.tableData_a = res.data;
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.UserMapping {
  height: 900px;
}
.UserMapping {
  .display {
    display: inline-block;
  }
  .title_text {
    margin: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #6bb1ec;
  }

  .box-card {
    display: inline-block;
    width: 30%;
    // height: 81rem;
    height: 85%;
    margin-left: 36px;
    margin-top: 30px;
    position: relative;
  }
  .card_text {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }
  .pagination {
    display: inline-block;
    position: absolute;
    bottom: 0;
  }
  .card_b_inputs {
    margin-top: 10px;
    margin-bottom: 15px;
    .card_b_input {
      width: 62%;
    }
  }
  // .card_b_table {
  //   height: 810px;
  //   // overflow-y: scroll;
  // }
  .icon_right {
    font-size: 30px;
    margin-left: 5px;
    margin-right: -25px;
    position: absolute;
    top: 50%;
  }
  @media screen and (max-width: 1300px) {
    .aoto_a {
      width: 70% !important;
    }
    .auto_b {
      width: 25% !important;
    }
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 8px;
  }
}
</style>
